/*
 * @Author: hy 
 * @Date: 2018-06-29 09:10:14 
 * @Last Modified by: hy
 * @Last Modified time: 2018-08-02 17:15:10
 */
<template>
  <div class="gq_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main" class="steelRingData">
          <div class="dataDisplay">
              <top-logo-title>
              <div slot="topTitle">自营店铺DashBoard</div>
              </top-logo-title>
              <div class="chart">
                  <div class="leftTopView">
                      <!-- 采购统计 -->
                      <div class="region">
                          <main-title>
                              <span slot="title">采购统计</span>
                          </main-title>
                          <!-- lineChart 位置 -->
                            <line-chartss :chartStyle="'position:absolute;top:3px;width:566px;min-height:280px;'" :option="lineChartssOption" v-model="purchaseStats"></line-chartss>
                      </div>
                      <!-- 本月供应商采购TOP5 -->
                      <div class="monthPurchase">
                          <main-title>
                              <span slot="title">本月供应商采购TOP5</span>
                          </main-title>
                          <!-- barChart 位置 -->
                          <bar-chart v-model="purchaseSupplierTopFive" :chartStyle="'width:600px;min-height:250px;'" :option="purchaseOption"></bar-chart>
                      </div>
                  </div>
                  <div class="leftBotView">
                        <div class="left">
                          <main-title>
                            <span slot="title">分公司销售统计</span>
                          </main-title>
                          <bar-chart v-model="departmentSaleStats" :chartStyle="'position:absolute;top:0;width:1805px;min-height:250px;'" :option="barChartOption"></bar-chart>
                        </div>
                  </div>
                  <div class="centerTopView">
                    <div class="left">
                      <p class="title">采购量</p>
                      <div class="numCon">
                        <span class="num"><span>当日</span></span>
                        <turn-page-num :numStyle="'margin-left:4px;font-size:42px;height:55px;width:27px'" :decimalnumStyle="'margin-left:4px;font-size:42px;height:55px;width:27px'"  v-model="currentDayPurchaseWeight"></turn-page-num>
                      </div>
                      <div class="numConBto">
                        <span class="num"><span>本月</span></span>
                        <turn-page-num :numStyle="'margin-left:2px;font-size:27px;height:36px;width:18px'" :decimalnumStyle="'margin-left:2px;font-size:27px;height:36px;width:18px'"  v-model="currentMonthPurchaseWeight"></turn-page-num>
                      </div>
                    </div>
                    <div class="right">
                      <p class="title">销售金额</p>
                      <div class="numCon">
                        <span class="num"><span>当日</span></span>
                        <turn-page-num :numStyle="'margin-left:4px;font-size:42px;height:55px;width:27px'" :decimalnumStyle="'margin-left:4px;font-size:42px;height:55px;width:27px'"  v-model="currentDaySalePrice"></turn-page-num>
                      </div>
                      <div class="numConBto">
                        <span class="num"><span>本月</span></span>
                        <turn-page-num :numStyle="'margin-left:2px;font-size:27px;height:36px;width:18px'" :decimalnumStyle="'margin-left:2px;font-size:27px;height:36px;width:18px'"  v-model="currentMonthSalePrice"></turn-page-num>
                      </div>
                    </div>
                  </div>
                  <div class="centerView">
                    <p class="title">销售量</p>
                    <div class="numCon">
                      <span class="num"><span>当日</span></span>
                      <turn-page-num :numStyle="'margin-left:8px;font-size:92px;height:115px;width:57px'" :decimalnumStyle="'margin-left:8px;font-size:92px;height:115px;width:57px'"  v-model="currentDaySaleWeight"></turn-page-num>
                    </div>
                  </div>
                  <div class="centerBotView">
                    <div class="numCon">
                      <span class="num"><span>本月</span></span>
                      <turn-page-num :numStyle="'margin-left:5px;font-size:53px;height:71px;width:35px'" :decimalnumStyle="'margin-left:5px;font-size:53px;height:71px;width:35px'"  v-model="currentMonthSaleWeight"></turn-page-num>
                    </div>
                  </div>
                  <div class="centerBottomView">
                    <p class="title">库存量</p>
                    <div class="numCon">
                      <span class="num"><span>总量</span></span>
                      <turn-page-num :numStyle="'margin-left:3px;font-size:41px;height:54px;width:27px'" :decimalnumStyle="'margin-left:3px;font-size:41px;height:54px;width:27px'"  v-model="inventoryStat.totalWeight"></turn-page-num>
                    </div>
                  </div>
                  <div class="centerBottomView2">
                    <div class="numCon">
                      <span class="num"><span>总价</span></span>
                      <turn-page-num :numStyle="'margin-left:2px;font-size:27px;height:35px;width:17px'" :decimalnumStyle="'margin-left:2px;font-size:27px;height:35px;width:17px'"  v-model="inventoryStat.inventoryCostValue"></turn-page-num>
                    </div>
                  </div>
                  <div class="rightTopView">
                      <!-- 销量统计 -->
                      <div class="succeedTrend">
                        <main-title>
                          <span slot="title">销量统计</span>
                        </main-title>
                        <line-chart v-model="saleStats" :chartStyle="'position:absolute;top:0;width:600px;min-height:230px;'" :option="lineChartOption"></line-chart>
                      </div>
                  </div>
                  <div class="rightBotView">
                      <div class="priceIndex">
                          <main-title>
                              <span slot="title">本月客户销售TOP5</span>
                          </main-title>
                          <bar-chart v-model="saleCustomerTopFive" :chartStyle="'width:600px;min-height:250px;'" :option="saleOption"></bar-chart>
                      </div>
                  </div>

              </div>
          </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
var tableAutoTimer = 0;
var autoTimer = 0;
require("@/components/gq/l-slide.js");
import topLogoTitle from "@/components/gq/topLogoTitle";
import mainTitle from "@/components/gq/mainTitle";
import bgLayOut from "@/components/bgLayOut/index";
import transPortMap from "@/components/gq/transPortMap.vue";
import lineChart from "@/components/Charts/lineChart";
import lineChartss from "@/components/Charts/lineChartss";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import turnPageNum from "@/components/turnPageNum/index.vue";
import _ from "lodash";
import {
  GetLargeScreenData // 自营店铺
} from "@/api/gq/index";
export default {
  name: "index",
  components: {
    topLogoTitle,
    transPortMap,
    mainTitle,
    bgLayOut,
    lineChart,
    lineChartss,
    pieChart,
    turnPageNum,
    barChart
  },
  beforeDestroy() {
    clearInterval(tableAutoTimer);
    clearInterval(autoTimer);
    clearInterval(this.timer);
    clearInterval(this.getVolumTimer);
  },
  data() {
    return {
      departmentSaleStats: [], // 分公司销售统计
      saleCustomerTopFive: [], // 本月客户销售
      purchaseSupplierTopFive: [], // 本月供应商采购
      saleStats: [], // 销量统计
      purchaseStats: [], // 采购统计
      currentDayPurchaseWeight: null, // 当日采购量
      currentMonthPurchaseWeight: null, // 当月采购量
      inventoryStat: {
        totalWeight: null,
        inventoryCostValue: null
      }, // 库存量
      currentDaySalePrice: null, // 当日销售额
      currentMonthSalePrice: null, // 当月销售额
      currentDaySaleWeight: null, // 当日销售量
      currentMonthSaleWeight: null, // 当月销售量
      timer: null,
      saleOption: {
        exchange: true,
        showLabel: true,
        labelColor: "rgba(240,189,38,1)",
        grid: {
          left: "18%",
          bottom: 80
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: false,
            rotate: 0,
            rich: {
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          }
        },
        startColor: "rgba(240,189,38,1) ",
        endColor: "rgba(240,189,38,0.6)",
        barWidth: 20
      },
      purchaseOption: {
        exchange: true,
        showLabel: true,
        grid: {
          left: "25%",
          bottom: 80
        },
        labelColor: "rgba(240,189,38,1)",
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: false,
            rotate: 0,
            rich: {
              value: {
                color: "rgba(240,189,38,1)"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          }
        },
        startColor: "rgba(240,189,38,1)",
        endColor: "rgba(240,189,38,0.6)",
        barWidth: 20
      },
      barChartOption: {
        openDataZoom: true,
        showLabel: false,
        grid: {
          left: "3.2%"
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          // max: 10000,
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          }
        },
        startColor: "rgb(40, 231, 135)",
        endColor: "rgba(40, 231, 135,0.6)",
        barWidth: 20
      },
      priceIndexArr: [], // 价格指数
      positive: true, // 是否为正数
      vmTotalSteelRingInfoNew: {
        currentDayOrderAmount: 0, // 今日订单成交额 ,
        currentDayOrderWeightRingRatio: 0, // 今日订单成交额环比 ,
        currentDayOrderWeight: 0, // 今日订单成交量 ,
        memberCount: 0, // 累计用户数 ,
        shopCount: 0 // 店铺数
      },
      turnoverArr: [], // 成交量趋势
      entryOrders: 0, // 挂单量
      gqDataList: [], // 挂单量分布
      bulleMessage: "",
      bulleMessageArr: [],
      messageArr: ["盘螺", "钢坯", "线材", "螺纹钢"],
      message: "盘螺",
      grossProfitOption: [], // 分公司销售统计
      lineChartssOption: {
        openDataZoom: true,
        legendColor: "#28E787",
        showSymbol: "none",
        tooltip: {
          show: false
        },
        grid: {
          left: "80"
        },
        legend: {
          top: "0",
          right: "0",
          padding: 0,
          itemGap: 0
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        color: ["#00D1FF", "#F0BD26", "#E95A24"]
      },
      lineChartOption: {
        showSymbol: "none",
        label: {
          show: true
        },
        dataZoom: [
          {
            end: 100
          }
        ],
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 2,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(240,189,38,0.7)",
        endColor: "rgba(240,189,38,0.2)",
        color: "#F0BD26"
      },
      turnoverOption: {
        grid: {
          top: 10,
          right: 10
        },
        openDataZoom: true,
        showSymbol: "none",
        showLabel: false,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 6,
            rich: {
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(233,90,36,0.7)",
        endColor: "rgba(233,90,36,0.2)",
        color: "rgb(233,90,36)"
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 自营店铺数据
    async fetchGetLargeScreenData() {
      try {
        var res = await GetLargeScreenData();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(
            this,
            "currentDayPurchaseWeight",
            resData.currentDayPurchaseWeight
          ); // 当日采购量
          this.$set(
            this,
            "currentMonthPurchaseWeight",
            resData.currentMonthPurchaseWeight
          ); // 当月采购量
          this.$set(this, "inventoryStat", resData.inventoryStat); // 库存量
          this.$set(this, "currentDaySalePrice", resData.currentDaySalePrice); // 当日销售额
          this.$set(
            this,
            "currentMonthSalePrice",
            resData.currentMonthSalePrice
          ); // 当月销售额
          this.$set(this, "currentDaySaleWeight", resData.currentDaySaleWeight); // 当日销售量
          this.$set(
            this,
            "currentMonthSaleWeight",
            resData.currentMonthSaleWeight
          ); // 当月销售量
          this.setPurchaseStats(resData);
          // 销量统计
          this.setSaleStats(resData);
          // 供应商采购
          this.setPurchaseSupplierTopFive(resData);
          // 本月客户销售 top5
          this.setSaleCustomerTopFive(resData);
          // 分公司销售统计
          this.setDepartmentSaleStats(resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    setDepartmentSaleStats(resData) {
      var departmentSaleStats = [];
      resData.departmentSaleStats.forEach(item => {
        var obj = {};
        obj.name = item.name;
        obj.value = item.saleWeight;
        departmentSaleStats.push(obj);
      });
      this.$set(this, "departmentSaleStats", departmentSaleStats);
    },
    setSaleCustomerTopFive(resData) {
      var saleCustomerTopFive = [];
      resData.saleCustomerTopFive.forEach(item => {
        var obj = {};
        obj.name = item.name;
        obj.value = item.saleWeight;
        saleCustomerTopFive.push(obj);
      });
      this.$set(this, "saleCustomerTopFive", _.reverse(saleCustomerTopFive));
    },
    setPurchaseSupplierTopFive(resData) {
      var purchaseSupplierTopFive = [];
      resData.purchaseSupplierTopFive.forEach(item => {
        var obj = {};
        obj.name = item.name;
        obj.value = item.purchaseWeight;
        purchaseSupplierTopFive.push(obj);
      });
      this.$set(
        this,
        "purchaseSupplierTopFive",
        _.reverse(purchaseSupplierTopFive)
      );
    },
    setSaleStats(resData) {
      var saleStats = [];
      resData.saleStats.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        obj.name = item.dayStr.slice(5, item.dayStr.length);
        obj.value = item.saleTotalWeight;
        saleStats.push(obj);
      });
      this.$set(this, "saleStats", saleStats);
    },
    setPurchaseStats(resData) {
      var purchaseStats = [];
      resData.purchaseStats.forEach(item => {
        var obj = {
          name: "",
          list: []
        };
        obj.name = item.dayStr.slice(5, item.dayStr.length);
        obj.list = [
          {
            name: "整体",
            value: item.purchaseTotalWeight
          },
          {
            name: "厂采",
            value: item.factoryPurchaseWeight
          },
          {
            name: "地采",
            value: item.supplierPurchaseWeight
          }
        ];
        purchaseStats.push(obj);
      });
      this.$set(this, "purchaseStats", purchaseStats); // 采购统计
    },
    fetchData() {
      this.fetchGetLargeScreenData();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

@mixin backBorRadius($color1: #000, $color2: #f0bd26, $radius: 10px) {
  color: $color2;
  background-color: $color1;
  border: 1px solid $color2;
  border-radius: $radius;
}
@mixin color($color1: #f0bd26, $color2: rgba(#006953, 0.5)) {
  color: $color1;
  background-color: $color2;
}

.steelRingData {
  .map {
    @include absoluteAllSides(110, 0, 0, 0, 1);
    // 地图
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    & .chart {
      @include absoluteAllSides(100, 30, 0, 0, 1);
      display: flex;
      justify-content: center;
      .leftTopView {
        position: absolute;
        top: 206px;
        left: 49px;
        z-index: 1;
        &::before {
          content: "";
          position: absolute;
          z-index: 1;
          top: -14px;
          left: 561px;
          width: 108px;
          height: 461px;
          background: url("../../../../../static/img/gq/zyds3.png") right bottom
            no-repeat;
          background-size: 100% 100%;
        }
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
          top: -67px;
          left: 107px;
          width: 469px;
          height: 42px;
          background: url("../../../../../static/img/gq/zyds2.png") left bottom
            no-repeat;
          background-size: 100% 100%;
        }
        .region {
          .areaChart {
            position: absolute;
            top: 22px;
          }
        }
        .monthPurchase {
          position: absolute;
          top: 240px;
        }
      }
      .leftBotView {
        position: absolute;
        bottom: 260px;
        left: 49px;
        z-index: 1;
        .left {
          position: relative;
          width: 600px;
          margin-top: 60px;
          .bubbleCon {
            position: absolute;
            top: 36px;
            right: 14px;
            background-image: url("../../../../../static/img/gq/bubble.png");
            background-size: 100% 100%;
            width: 126px;
            height: 37px;
            text-align: center;
            line-height: 30px;
            span {
              color: #28e787;
              font-size: 14px;
            }
          }
        }
      }
      .centerTopView {
        position: absolute;
        top: 3px;
        width: 1067px;
        z-index: 1;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        .left {
          .title {
            text-align: right;
            font-weight: bold;
            color: #f0bd26;
            font-size: 22px;
          }
          .numCon {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
            .num {
              font-weight: bold;
              align-self: flex-end;
              margin-right: 5px;
              font-size: 20px;
              font-size: 10px;
              color: #28e787;
            }
          }
          .numConBto {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
            .num {
              font-weight: bold;
              align-self: flex-end;
              margin-right: 5px;
              font-size: 20px;
              font-size: 10px;
              color: #28e787;
            }
          }
        }
        .right {
          .title {
            text-align: left;
            font-weight: bold;
            color: #f0bd26;
            font-size: 22px;
          }
          .numCon {
            display: flex;
            justify-content: flex-start;
            margin-top: 15px;
            .num {
              font-weight: bold;
              align-self: flex-end;
              margin-right: 5px;
              font-size: 20px;
              font-size: 10px;
              color: #28e787;
            }
          }
          .numConBto {
            display: flex;
            justify-content: flex-start;
            margin-top: 10px;
            .num {
              font-weight: bold;
              align-self: flex-end;
              margin-right: 5px;
              font-size: 20px;
              font-size: 10px;
              color: #28e787;
            }
          }
        }
      }
      .centerView {
        position: absolute;
        top: 160px;
        z-index: 1;
        text-align: center;
        .title {
          font-weight: bold;
          color: #f0bd26;
          font-size: 32px;
        }
        .numCon {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .num {
            align-self: flex-end;
            margin-right: 5px;
            font-size: 25px;
            color: #28e787;
          }
        }
      }
      .centerBotView {
        position: absolute;
        top: 363px;
        z-index: 1;
        text-align: center;
        .numCon {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .num {
            align-self: flex-end;
            margin-right: 5px;
            font-size: 18px;
            color: #28e787;
          }
        }
      }
      .centerBottomView {
        position: absolute;
        top: 496px;
        z-index: 1;
        text-align: center;
        .title {
          color: #f0bd26;
          font-size: 22px;
        }
        .numCon {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .num {
            align-self: flex-end;
            margin-right: 5px;
            font-size: 20px;
            color: #28e787;
          }
        }
      }
      .centerBottomView2 {
        position: absolute;
        top: 599px;
        z-index: 1;
        text-align: center;
        .numCon {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .num {
            align-self: flex-end;
            margin-right: 5px;
            font-size: 20px;
            color: #28e787;
          }
        }
      }
      .rightTopView {
        position: absolute;
        left: 69%;
        right: 10px;
        top: 206px;
        &::before {
          content: "";
          position: absolute;
          right: 0;
          z-index: 1;
          top: -67px;
          right: 158px;
          width: 465px;
          height: 42px;
          background: url("../../../../../static/img/gq/zyds1.png") right bottom
            no-repeat;
          background-size: 100% 100%;
        }
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
          top: -14px;
          left: -140px;
          width: 108px;
          height: 461px;
          background: url("../../../../../static/img/gq/zyds4.png") left bottom
            no-repeat;
          background-size: 100% 100%;
        }
        .succeedTrend {
          .rightTopChart {
            position: relative;
            height: 200px;
            width: 530px;
          }
          .circleCon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            top: -43px;
            .circle {
              width: 88px;
              height: 88px;
              border-radius: 50%;
              background: #006953;
              color: #f0bd26;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              .num {
                @include din(23px);
              }
            }
            .img {
              width: 303px;
              height: 17px;
              position: absolute;
              top: 20%;
            }
            .tab {
              flex-direction: row;
              display: flex;
              justify-content: space-around;
              width: 400px;
              .tabItem {
                width: 86px;
                height: 52px;
                line-height: 52px;
                text-align: center;
                font-size: 20px;
                margin: 15px 0;
                padding-left: 4px;
                @include backBorRadius;
              }
            }
            .myTable {
              padding-right: 20px;
              width: 100%;
              height: 272px;
              .myTableHead {
                display: flex;
                justify-content: space-around;
                font-size: 18px;
                color: #28e787;
                width: 100%;
                background: rgba($color: #006953, $alpha: 0.4);
                span {
                  line-height: 40px;
                  display: inline-block;
                  width: calc(100% / 4);
                  text-align: center;
                  word-wrap: break-word;
                }
              }
              .myTableBody {
                position: relative;
                width: 100%;
                height: 240px;
                margin: 0 auto;
                overflow: hidden;
                ul {
                  position: relative;
                  top: 0;
                  left: 0;
                  width: 100%;
                  float: right;
                  color: #444;
                  font-size: 14px;
                  margin-top: 1px;
                  li {
                    display: flex;
                    justify-content: space-around;
                    font-size: 16px;
                    color: #28e787;
                    width: 100%;
                    span {
                      line-height: 40px;
                      display: inline-block;
                      width: calc(100% / 4);
                      text-align: center;
                      word-wrap: break-word;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .rightBotView {
        position: absolute;
        left: 69%;
        top: 447px;
      }
    }
  }
}
</style>


